<template>
  <div class="ToDoListWrap">
    <HeaderPart :addTodo="addTodo"></HeaderPart>
    <TodoList
      :ToDos="ToDos"
      :changeChecked="changeChecked"
      :delToDo="delToDo"
    ></TodoList>
    <FooterPart
      :ToDos="ToDos"
      :delToDos="delToDos"
      :checkToDos="checkToDos"
    ></FooterPart>
  </div>
</template>

<script>
import HeaderPart from "../src/components/HeaderPart";
import TodoList from "../src/components/TodoList";
import FooterPart from "../src/components/FooterPart";

export default {
  name: "App",
  components: {
    HeaderPart,
    TodoList,
    FooterPart,
  },
  data() {
    return {
      ToDos: JSON.parse(localStorage.getItem('ToDos')) || [],
    };
  },
  methods: {
    //添加todo
    addTodo(todoObj) {
      this.ToDos.unshift(todoObj);
    },
    //修改todo完成状态
    changeChecked(id) {
      this.ToDos.forEach((ToDos) => {
        if (id === ToDos.id) ToDos.done = !ToDos.done;
      });
    },
    //选择和取消所有
    checkToDos(done) {
      this.ToDos.forEach((ToDos) => {
        ToDos.done = done;
      });
    },
    //删除单独todo
    delToDo(id) {
      for (let i = 0; i < this.ToDos.length; i++) {
        if (this.ToDos[i].id === id) {
          this.ToDos.splice(i, 1);
        }
      }
    },
    //删除所有已完成
    delToDos() {
      this.ToDos = this.ToDos.filter((d) => {
        return !d.done;
      });
    },
  },
  watch:{
    ToDos:{
      deep:true,
      handler(value){
        localStorage.setItem('ToDos',JSON.stringify(value));
      }
    }
  }
};
</script>

<style>
* {
  box-sizing: border-box;
}
.ToDoListWrap {
  border: 1px solid #cccccc;
  width: 550px;
  padding: 10px;
  margin: 0 auto;
  border-radius: 5px;
}
</style>
